<template>
  <div id="appWrap">
    <!-- loader start -->
    <div class="loader" v-if="isLoading">
      <div class="spinner">
        <img :src='`${this.rootUrl}img/assets/loader.gif`' alt="loader" />
      </div>
    </div>
    <!-- loader end -->
    <!-- Bottom To Top -->
    <div class="ks-top-icon">
      <a id="button" :class="{ show: showTopButton }" @click="scrollToTop">
        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="18" viewBox="0 0 23 18">
          <path
            d="M13.825,18.000 C10.772,18.000 7.928,16.517 6.217,14.033 C5.870,13.530 6.006,12.845 6.519,12.505 C7.032,12.165 7.729,12.297 8.076,12.801 C9.369,14.678 11.518,15.799 13.825,15.799 C17.647,15.799 20.757,12.749 20.757,9.000 C20.757,5.251 17.647,2.200 13.825,2.200 C11.512,2.200 9.359,3.326 8.067,5.212 C7.721,5.717 7.024,5.851 6.510,5.512 C5.996,5.173 5.859,4.489 6.205,3.985 C7.915,1.490 10.763,-0.000 13.825,-0.000 C18.884,-0.000 23.000,4.037 23.000,9.000 C23.000,13.963 18.884,18.000 13.825,18.000 ZM11.293,6.704 C10.902,6.313 10.902,5.679 11.293,5.287 C11.683,4.896 12.316,4.896 12.707,5.287 L15.706,8.291 C15.730,8.315 15.752,8.339 15.772,8.365 C15.777,8.371 15.782,8.377 15.787,8.384 C15.802,8.403 15.817,8.423 15.831,8.443 C15.835,8.449 15.838,8.455 15.842,8.462 C15.856,8.483 15.869,8.505 15.881,8.527 C15.883,8.532 15.886,8.537 15.888,8.541 C15.901,8.566 15.913,8.590 15.923,8.616 C15.925,8.619 15.925,8.622 15.927,8.626 C15.938,8.653 15.948,8.680 15.956,8.708 C15.957,8.712 15.958,8.715 15.959,8.719 C15.967,8.747 15.974,8.774 15.980,8.803 C15.982,8.812 15.982,8.820 15.984,8.829 C15.988,8.852 15.992,8.876 15.995,8.900 C15.998,8.933 16.000,8.966 16.000,9.000 C16.000,9.033 15.998,9.067 15.995,9.100 C15.992,9.124 15.988,9.148 15.984,9.172 C15.982,9.180 15.982,9.189 15.980,9.197 C15.974,9.226 15.967,9.254 15.959,9.282 C15.958,9.285 15.957,9.288 15.956,9.292 C15.948,9.320 15.938,9.348 15.927,9.375 C15.925,9.378 15.925,9.381 15.923,9.384 C15.913,9.410 15.901,9.435 15.888,9.459 C15.886,9.464 15.883,9.468 15.881,9.473 C15.869,9.495 15.856,9.517 15.842,9.539 C15.838,9.545 15.835,9.551 15.831,9.557 C15.817,9.577 15.802,9.597 15.787,9.616 C15.782,9.623 15.777,9.629 15.772,9.636 C15.752,9.661 15.730,9.685 15.707,9.708 L12.707,12.712 C12.511,12.908 12.256,13.006 12.000,13.006 C11.744,13.006 11.488,12.908 11.293,12.712 C10.902,12.321 10.902,11.688 11.293,11.296 L12.586,10.001 L1.000,10.001 C0.448,10.001 -0.000,9.553 -0.000,9.000 C-0.000,8.447 0.448,7.998 1.000,7.998 L12.586,7.998 L11.293,6.704 Z">
          </path>
        </svg>
      </a>
    </div>
    <!-- Bottom To Top -->

    <!-- header section start -->
    <div class="ks-header-wrapper">
      <div class="container">
        <div class="ks-header-parent">
          <div class="ks-header-inner">
            <div class="ks-brand-logo">
              <router-link to="/"><img :src="`${this.rootUrl}img/assets/logo.png`" alt=""></router-link>
              <div class="ks-toggle-btn" :style="{
                display: screenWidth <= 1200 ? 'block !important' : '',
              }" @click="toggle_menu">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>

            <div class="ks-navbar-menu" :class="{ active: menuActive }">
              <ul class="menu">
                <li class="responsive-logo"><a href="javascript:;"><img :src="`${this.rootUrl}img/assets/logo.png`"
                      alt=""></a></li>
                <li class="active"><router-link to="/">Home</router-link></li>
                <li><router-link to="/game">Game</router-link></li>
                <li><router-link to="/feedback">Feedback</router-link></li>
                <li><router-link to="/profiles">Profiles</router-link></li>
                <li><router-link to="/purchases">Purchases</router-link></li>
                <li><router-link to="/userDashborad">User Dashboard</router-link></li>
              </ul>
            </div>
            <div class="header-right-btn d-lg-block ml-20" style="float:right">
              <router-link to="/login" class="btn header-btn mr-3">Login</router-link>
              <router-link to="/signin" class="btn cart-btn mr-3">SignIn</router-link>
            </div>


          </div>


        </div>
      </div>


    </div>
    <!-- header section end -->

    <!-- banner section start -->
    <div class="ks-banner-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-lg-7">
            <div class="ks-banner-left">
              <h4>welcome to kids school</h4>
              <h1>better future for your kids</h1>
              <p>It will be considered helpful, but at the same time it will suffer from labor.
                something. Who suspended himself with heavy ultrasound. I live on a live stream of machines together.
                You're either lazy or easy.</p>
              <div class="ks-banner-btn">
                <div class="ks-main-btn">
                  <a href="javascript:;" class="ks-btn">Read More</a>
                </div>
                <div class="ks-banner-video-btn">
                  <p>play cards Plus demo</p>
                  <a href="javascript:;" @click="openVideoModal">
                    <span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="170.469" height="17.937"
                        viewBox="0 0 13.469 17.937">
                        <path class="cls-1"
                          d="M831.423,622.956c0-2.407,0-4.814.006-7.222a3.236,3.236,0,0,1,.136-0.961,1.057,1.057,0,0,1,1.347-.75,3.639,3.639,0,0,1,1.075.486q4.952,3.366,9.883,6.763a2.031,2.031,0,0,1,1.008,1.561,1.922,1.922,0,0,1-.953,1.761c-1.256.874-2.521,1.733-3.782,2.6q-3.02,2.069-6.04,4.133a4.67,4.67,0,0,1-.788.45,1.245,1.245,0,0,1-1.879-1.14c-0.017-.186-0.013-0.374-0.013-0.561v-7.117Z"
                          transform="translate(-831.406 -613.969)" />
                      </svg>
                    </span>
                  </a>
                </div>
              </div>
            </div>
            <!-- Video Modal -->
            <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalTitle"
              aria-hidden="true" v-if="showVideoModal">
              <div class="modal-dialog modal-dialog-centered mg-left" role="document">
                <div class="modal-content">
                  <div class="mf-banner-video">
                    <video controls id="video1" src="https://www.youtube.com/watch?v=qkTAmHb9p4Y"></video>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- banner section end -->

    <!-- blog section start -->
    <div class="ks-blog-wrapper" id="classes">
      <div class="container">
        <div class="ks-blog-heading">
          <h2 class="ks-heading">our popular online game</h2>
          <a href="javascript:;" class="ks-paragraph">view all games
            <span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16.03" height="9.97" viewBox="0 0 16.03 9.97">
                <path class="cls-1"
                  d="M1115.25,2936.29h-12.11a2.541,2.541,0,0,0-.39.01,0.8,0.8,0,0,0,0,1.59,2.508,2.508,0,0,0,.39.01h12.18a3.121,3.121,0,0,1-.24.3c-0.79.81-1.58,1.63-2.38,2.44a0.868,0.868,0,0,0-.26.87,0.752,0.752,0,0,0,1.28.35c1.38-1.39,2.74-2.79,4.1-4.2a0.765,0.765,0,0,0,0-1.12q-2.04-2.115-4.09-4.21a0.739,0.739,0,0,0-1.09,0,0.821,0.821,0,0,0,.01,1.16c0.78,0.81,1.56,1.62,2.35,2.42a2.215,2.215,0,0,0,.35.25A1.132,1.132,0,0,1,1115.25,2936.29Z"
                  transform="translate(-1102.06 -2932.12)"></path>
              </svg>
            </span>
          </a>
        </div>
        <div class="row gy-4">
          <div class="col-lg-4 col-md-6 col-12" v-for="(game, index) in games" :key="index">
            <div class="ks-blog-box">
              <div class="ks-blog-inner">
                <a href="javascript:;">
                  <div class="ks-blog-img">
                    <img :src="game.image" alt="">
                  </div>
                </a>
                <div class="ks-blog-content">
                  <a href="javascript:;" class="ks-dark-btn">{{ game.ageRange }}</a>
                  <h4>{{ game.title }}</h4>
                  <p class="ks-paragraph">{{ game.description }}</p>
                  <div class="ks-blog-footer">
                    <a href="javascript:;">
                      <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14">
                          <path class="cls-1"
                            d="M414.72,4963.71h-5.205c-0.639,0-.739-0.11-0.717-0.76a5.916,5.916,0,0,1,11.748-.83,7.2,7.2,0,0,1,.093.91c0.023,0.55-.1.68-0.632,0.68H414.72Zm0.017-7.47a3.261,3.261,0,1,1,3.18-3.3A3.223,3.223,0,0,1,414.737,4956.24Zm-8.628-.48a2.286,2.286,0,1,1,2.286,2.36A2.312,2.312,0,0,1,406.109,4955.76Zm12.717,0.01a2.286,2.286,0,1,1,4.572.02A2.287,2.287,0,1,1,418.826,4955.77Zm2.707,7.94a7.047,7.047,0,0,0-1.253-4.55,3.579,3.579,0,0,1,1.839.01,4.216,4.216,0,0,1,3.09,3.71c0.058,0.67-.077.83-0.727,0.83h-2.949Zm-12.383-4.53a7.017,7.017,0,0,0-1.244,4.53h-3.15a0.484,0.484,0,0,1-.538-0.54,4.168,4.168,0,0,1,4.722-4.07C409,4959.12,409.061,4959.15,409.15,4959.18Z"
                            transform="translate(-404.219 -4949.72)" />
                        </svg>
                        {{ game.students }} Students
                      </span>
                      <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
                          <path class="cls-1"
                            d="M546.95,4952.05A7,7,0,1,0,549,4957,6.963,6.963,0,0,0,546.95,4952.05ZM542,4962.63a5.637,5.637,0,0,1-5.626-5.63v-0.02h0v-0.01a5.642,5.642,0,0,1,5.55-5.6H542A5.63,5.63,0,0,1,542,4962.63Zm4.273-5.29a0.419,0.419,0,0,1-.414-0.42,0.41,0.41,0,0,1,.414-0.41h0.5a4.819,4.819,0,0,0-4.416-4.3v0.44a0.415,0.415,0,0,1-.829,0v-0.42a4.8,4.8,0,0,0-4.306,4.34h0.447a0.41,0.41,0,1,1,0,.82h-0.45a4.806,4.806,0,0,0,4.367,4.39v-0.53a0.414,0.414,0,0,1,.828,0v0.53a4.8,4.8,0,0,0,4.372-4.44h-0.513Zm-2.6-1.43-1.384,1.38a0.418,0.418,0,0,1-.586,0l-2.409-2.41a0.409,0.409,0,0,1,0-.58,0.418,0.418,0,0,1,.586,0l2.116,2.11,1.091-1.09A0.416,0.416,0,0,1,543.677,4955.91Z"
                            transform="translate(-535 -4950)" />
                        </svg>
                        {{ game.time }}
                      </span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- blog section end -->

    <!-- client section start -->
    <div class="ks-client-wrapper" id="testimonial">
      <div class="container">
        <div class="ks-client-top-heading">
          <h2 class="ks-heading">Feedback</h2>
        </div>
        <el-carousel :interval="3000" type="card" height="300px">
          <el-carousel-item v-for="(testimonial, index) in testimonials" :key="index">
            <div class="ks-client-box">
              <div class="ks-client-box-inner">
                <div class="ks-client-heading">
                  <div class="ks-client-img">
                    <img :src="testimonial.image" alt="">
                  </div>
                  <div class="ks-client-name">
                    <h6>{{ testimonial.name }}</h6>
                    <p>{{ testimonial.position }}</p>
                  </div>
                </div>
                <div class="ks-client-text">
                  <p class="ks-paragraph">{{ testimonial.text }}</p>
                  <div class="ks-qoute-img">
                    <span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="58.281" height="50.22" viewBox="0 0 58.281 50.22">
                        <path class="cls-1"
                          d="M855.949,3875.29c0.363-.72.69-1.47,1.1-2.17a73.444,73.444,0,0,0,6.635-13.88c0.724-2.21,1.279-4.48,1.941-6.84-1.517.2-2.8,0.48-4.09,0.52a13.8,13.8,0,0,1-3.164-27.35,13.611,13.611,0,0,1,16.413,12.4c0.548,10.1-1.583,19.69-7.484,28.18-2.7,3.88-6.462,6.54-10.37,9.04a4.288,4.288,0,0,1-.716.3C856.123,3875.42,856.036,3875.36,855.949,3875.29Zm30.418-.04c4.152-7.22,8.2-14.47,9.615-22.96a15.391,15.391,0,0,1-7.048.43,13.827,13.827,0,1,1,16.462-13.68c0.08,9.11-1.709,17.79-6.591,25.66-2.831,4.57-6.957,7.73-11.422,10.52a4.007,4.007,0,0,1-.709.26C886.572,3875.4,886.469,3875.32,886.367,3875.25Z"
                          transform="translate(-847.125 -3825.28)" />
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- client section end -->

    <!-- copyright section start -->
    <div class="ks-copyright-wrapper">
      <p>© {{ currentYear }} <router-link to="/">Kids School</router-link>, All Rights Reserved</p>
    </div>
    <!-- copyright section end -->
  </div>
</template>

<script>
// 导入Element UI组件
import { Carousel, CarouselItem } from 'element-ui';

export default {
  name: 'home',
  components: {
    ElCarousel: Carousel,
    ElCarouselItem: CarouselItem
  },
  data() {
    return {
      isLoading: true,
      screenWidth: null,
      menuActive: false,
      showTopButton: false,
      showVideoModal: false,
      currentYear: new Date().getFullYear(),
      games: [
        {
          image: `${this.rootUrl}img/assets/b1.jpg`,
          ageRange: 'age - 5-7 year',
          title: 'communication skills classes',
          description: 'Consectetur adipiscing eelit, seesd desdo eiusmod tempor incididunt usadeet labore et dolore magna aliqua.',
          students: '25',
          time: '08:00 To 11:00'
        },
        {
          image: `${this.rootUrl}img/assets/b1.jpg`,
          ageRange: 'age - 5-7 year',
          title: 'communication skills classes',
          description: 'Consectetur adipiscing eelit, seesd desdo eiusmod tempor incididunt usadeet labore et dolore magna aliqua.',
          students: '25',
          time: '08:00 To 11:00'
        }
      ],
      testimonials: [
        {
          image: `${this.rootUrl}img/assets/client1.png`, // 可能找不到此资源，需确认路径是否正确
          name: 'David Parker',
          position: 'UI / UX Designer',
          text: 'Consectetur adipiscing eeesdeelit, seesd desdo eiusesmod tempior incididunt usadeet labore et dolore magna alisdqua orem ipsm dolor sit amet consectetur adipisicing elit eiorem ipsum dolor sit amet consectetur.'
        },
        {
          image: `${this.rootUrl}img/assets/client2.png`,
          name: 'David Parker',
          position: 'UI / UX Designer',
          text: 'Consectetur adipiscing eeesdeelit, seesd desdo eiusesmod tempior incididunt usadeet labore et dolore magna alisdqua orem ipsm dolor sit amet consectetur adipisicing elit eiorem ipsum dolor sit amet consectetur.'
        },
        {
          image: `${this.rootUrl}img/assets/client1.png`,
          name: 'David Parker',
          position: 'UI / UX Designer',
          text: 'Consectetur adipiscing eeesdeelit, seesd desdo eiusesmod tempior incididunt usadeet labore et dolore magna alisdqua orem ipsm dolor sit amet consectetur adipisicing elit eiorem ipsum dolor sit amet consectetur.'
        },
        {
          image: `${this.rootUrl}img/assets/client2.png`,
          name: 'David Parker',
          position: 'UI / UX Designer',
          text: 'Consectetur adipiscing eeesdeelit, seesd desdo eiusesmod tempior incididunt usadeet labore et dolore magna alisdqua orem ipsm dolor sit amet consectetur adipisicing elit eiorem ipsum dolor sit amet consectetur.'
        },
        {
          image: `${this.rootUrl}img/assets/client1.png`,
          name: 'David Parker',
          position: 'UI / UX Designer',
          text: 'Consectetur adipiscing eeesdeelit, seesd desdo eiusesmod tempior incididunt usadeet labore et dolore magna alisdqua orem ipsm dolor sit amet consectetur adipisicing elit eiorem ipsum dolor sit amet consectetur.'
        }
      ]
    };
  },
  mounted() {
    // 页面加载后隐藏加载动画
    setTimeout(() => {
      this.isLoading = false;
    }, 1000);

    // 添加滚动事件监听
    window.addEventListener('scroll', this.handleScroll);
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      this.screenWidth = document.body.clientWidth;
    };
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('scroll', this.handleScroll);
  },
  watch: {
    screenWidth: {
      handler(val) {
        if (val < 900) {
          console.log(val + " 屏幕宽度小于900px");
        } else {
          console.log(val + " 屏幕宽度大于900px");
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    toggle_menu() {
      document.body.classList.toggle("menu-open");
    },
    toggleMenu() {
      this.menuActive = !this.menuActive;
    },
    handleScroll() {
      if (window.scrollY > 300) {
        this.showTopButton = true;
      } else {
        this.showTopButton = false;
      }
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    openVideoModal() {
      this.showVideoModal = true;
    }
  }
};
</script>

<style lang="scss" scoped>
/* 重要：引入必要的样式文件 */
@import "/cdn/bootstrap/bootstrap.min.css";
@import "/font/css/font-awesome.min.css";
@import "/font/css/style.css";
@import "/font/css/responsive.css";
@import '/font/css/common.css';
@import '/cdn/element-ui/2.15.5/theme-chalk/index.css';


/* .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
} */
#appWrap {
  height: 100%;
  overflow-y: scroll !important;
}

/* 加载动画 */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 横幅区域 */
.ks-banner-wrapper {
  // background-color: #f5f5f5;
  // padding: 60px 0;
  background-image: url('/img/assets/bannerBg.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 250px;
  position: relative;
  z-index: 1;

}

.ks-banner-wrapper::before {
  content: '';
  background-image: url('/img/assets//bannerCloud.png');
  background-position: 70% 25%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  animation: up-down 2.5s infinite alternate-reverse both;
}

@keyframes up-down {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(20px);
  }
}

.ks-banner-left {
  position: relative;
  color: white;
  padding-top: 200px;
}

.ks-banner-left h4 {
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #00c3c9;
  font-weight: 600;
  background-color: #ffffff;
  clip-path: polygon(0.5% 0%, 62% 0%, 59% 55%, 62% 100%, 0.5% 100%);
  padding: 15px 15px 11px 18px;
  max-width: 520px;
  width: 100%;
}

.ks-banner-left h1 {
  font-size: 62px;
  font-weight: 800;
  text-transform: capitalize;
  margin: 15px 0px 10px;
}

.ks-banner-left p {
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.6;
}

.ks-banner-btn {
  display: flex;
  align-items: center;
}

.ks-btn {
  position: relative;
  max-width: 190px;
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "Inter";
  font-weight: 600;
  text-transform: capitalize;
  font-size: 16px;
  color: #00c3c9;
  background-color: #ffffff;
  border-radius: 40px;
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.ks-btn:hover {
  background-color: #e57d20;
  color: #ffffff;
}

.ks-banner-video-btn {
  display: flex;
  align-items: center;
  margin-left: 30px;
}

.ks-banner-video-btn p {
  margin: 0 15px 0 0;
}

// .ks-banner-video-btn span {
//   width: 80px;
//   height: 80px;
//   border-radius: 50%;
//   background-color: var(--ks-white-color);
//   border: 6px solid rgba(86, 204, 213, 0.79);
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   margin-left: 20px;
//   animation: shadow-pulse 1.3s infinite alternate-reverse both;
// }

.ks-banner-video-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
}

.ks-banner-video-btn a svg {
  fill: #f28f38;
}

/* 博客/游戏部分 */
.ks-blog-wrapper {
  padding: 80px 0;
}

.ks-blog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.ks-heading {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  text-transform: capitalize;
}

.ks-paragraph {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  align-items: center;
}

.ks-paragraph svg {
  margin-left: 10px;
  fill: #f28f38;
}

.ks-blog-box {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  height: 100%;
}

.ks-blog-box:hover {
  transform: translateY(-10px);
}

.ks-blog-img {
  height: 200px;
  overflow: hidden;
}

.ks-blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.ks-blog-box:hover .ks-blog-img img {
  transform: scale(1.1);
}

.ks-blog-content {
  padding: 20px;
}

.ks-dark-btn {
  display: inline-block;
  padding: 6px 12px;
  background-color: #333;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 15px;
}

.ks-blog-content h4 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 600;
  text-transform: capitalize;
}

.ks-blog-footer {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.ks-blog-footer a {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
}

.ks-blog-footer span {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.ks-blog-footer svg {
  margin-right: 8px;
  fill: #f28f38;
}

/* 客户反馈部分 */
.ks-client-wrapper {
  background-color: #f8f8f8;
  padding: 80px 0;
}

.ks-client-top-heading {
  text-align: center;
  margin-bottom: 50px;
}

/* Element UI Carousel 自定义样式 */
.el-carousel__item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ks-client-box {
  height: 100%;
  padding: 30px;
}

.ks-client-box-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ks-client-heading {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.ks-client-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.ks-client-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ks-client-name h6 {
  font-size: 18px;
  margin: 0 0 5px;
  font-weight: 600;
}

.ks-client-name p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.ks-client-text {
  position: relative;
}

.ks-qoute-img {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.1;
}

.ks-qoute-img svg {
  width: 80px;
  height: 80px;
  fill: #f28f38;
}

/* 版权部分 */
.ks-copyright-wrapper {
  background-color: #333;
  color: white;
  padding: 20px 0;
  text-align: center;
}

.ks-copyright-wrapper p {
  margin: 0;
  font-size: 14px;
}

.ks-copyright-wrapper a {
  color: #f28f38;
  text-decoration: none;
}

/* 视频模态框 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  z-index: 1001;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.mf-banner-video {
  width: 100%;
}

.mf-banner-video video {
  width: 100%;
  display: block;
}

/* Element UI 走马灯自定义样式 */
.el-carousel {
  padding: 0 20px;
}

.el-carousel__item {
  padding: 20px;
}

.el-carousel__arrow {
  background-color: #f28f38;
}

.el-carousel__arrow:hover {
  background-color: #e57d20;
}

.el-carousel__indicators {
  bottom: -10px;
}

.el-carousel__indicator--horizontal .el-carousel__button {
  background-color: #f28f38;
}



// @media (max-width: 768px) {
//   .ks-banner-btn {
//     flex-direction: column;
//     align-items: flex-start;
//   }

//   .ks-banner-video-btn {
//     margin-left: 0;
//     margin-top: 20px;
//   }

//   .ks-heading {
//     font-size: 28px;
//   }

//   .el-carousel {
//     height: 400px !important;
//   }
// }

// @media (max-width: 576px) {
//   .header-right-btn {
//     display: none;
//   }

//   .ks-banner-left h1 {
//     font-size: 28px;
//   }

//   .ks-banner-left h4 {
//     font-size: 16px;
//   }

//   .ks-banner-left p {
//     font-size: 14px;
//   }

//   .ks-blog-content h4 {
//     font-size: 18px;
//   }

//   .el-carousel {
//     height: 450px !important;
//   }
// }</style>
